import React, { useState } from 'react';
import {
  Form,
  Row,
  Col,
  Button,
  DatePicker,
  Select,
  Table,
  Input,
  Badge,
  message,
} from 'antd';
import { history } from 'umi';
import request from '@/http';
import { Homework } from '@/pages/login/service';
const { RangePicker } = DatePicker;
const { Option } = Select;

export default () => {
  const [form] = Form.useForm();
  const [expand, setExpand] = useState(false);
  const formItemLayout = {
    labelCol: {
      xs: { span: 7 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
  const [select, setSelect] = useState([]);
  const loadSelect = async () => {
    const result: any = await request.post(
      '/api/common_module/a_t_s/getTeacher',
    );
    if (result.success) {
      setSelect(result.data);
    }
  };
  const [select2, setSelect2] = useState([]);
  const loadSelect2 = async () => {
    const result: any = await request.post(
      '/api/common_module/a_t_s/getCourse',
    );
    if (result.success) {
      setSelect2(result.data);
    }
  };
  React.useEffect(() => {
    loadSelect();
    loadSelect2();
  }, []);
  const getFields = () => {
    const count = expand ? 10 : 6;
    const children = [];

    children.push(
      <Col span={8}>
        <Form.Item name="date" label="发布日期:">
          <RangePicker
            style={{
              width: '100%',
            }}
            showTime={{ format: 'HH:mm' }}
            format="YYYY-MM-DD HH:mm"
          />
        </Form.Item>
      </Col>,

      <Col span={8}>
        <Form.Item name="courseName" label="项目名称">
          <Select
            placeholder="请选择..."
            optionFilterProp="children"
            filterOption={(input, option: any) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
            filterSort={(optionA, optionB) =>
              optionA.children
                .toLowerCase()
                .localeCompare(optionB.children.toLowerCase())
            }
          >
            {select2.map((item: any) => {
              return <Option value={item.courseName}>{item.courseName}</Option>;
            })}
          </Select>
        </Form.Item>
      </Col>,

      <Col span={8}>
        <Form.Item name="title" label="作业主题">
          <Input placeholder="请录入..." />
        </Form.Item>
      </Col>,
      <Col span={8}>
        <Form.Item name="workType" label="作业类型">
          <Select
            placeholder="请选择..."
            optionFilterProp="children"
            filterOption={(input, option: any) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
            filterSort={(optionA, optionB) =>
              optionA.children
                .toLowerCase()
                .localeCompare(optionB.children.toLowerCase())
            }
          >
            <Option value="0">平时作业</Option>
            <Option value="1">阶段性作业</Option>
            <Option value="2">最终交互作业</Option>
          </Select>
        </Form.Item>
      </Col>,

      <Col span={8}>
        <Form.Item name="teacherName" label="老师">
          <Select
            placeholder="请选择..."
            optionFilterProp="children"
            filterOption={(input, option: any) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
            filterSort={(optionA, optionB) =>
              optionA.children
                .toLowerCase()
                .localeCompare(optionB.children.toLowerCase())
            }
          >
            {select.map((item: any) => {
              return (
                <Option value={item.teacherName}>{item.teacherName}</Option>
              );
            })}
          </Select>
        </Form.Item>
      </Col>,

      <Col span={8}>
        <Form.Item name="completeDate" label="计划完成时间">
          <DatePicker
            showTime={{ format: 'HH:mm' }}
            format="YYYY-MM-DD HH:mm"
            style={{
              width: '100%',
            }}
          />
        </Form.Item>
      </Col>,
    );
    return children;
  };

  const columns = [
    {
      title: '发布日期',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '项目名称',
      dataIndex: 'courseName',
      key: 'courseName',
    },
    {
      title: '作业主题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '作业类型',
      dataIndex: 'workType',
      key: 'workType',
    },
    {
      title: '实训老师',
      dataIndex: 'teacherName',
      key: 'teacherName',
    },
    {
      title: '计划完成时间',
      dataIndex: 'completeDate',
      key: 'completeDate',
    },
    {
      title: '作业完成状态',
      dataIndex: 'age',
      key: 'age',
      render: (age: any) => {
        return (
          <>
            <Badge status="processing" text="待批复" />
          </>
        );
      },
    },
    {
      title: '实际完成时间',
      dataIndex: 'completeTime',
      key: 'completeTime',
    },
    {
      title: '得分',
      dataIndex: '',
      key: '',
    },
    {
      title: '操作',
      key: 'age',
      render: (text: any) => {
        return (
          <Button
            type="link"
            onClick={() => {
              Homework.saveHomeworkIds({ id: text.id, role: 1 });
              history.push('/global/homework/details');
            }}
          >
            详情
          </Button>
        );
      },
    },
  ];

  const [dataSource, setDataSource] = useState([]);
  const data = {
    completeDate: '',
    courseName: '',
    createTime: '',
    teacherName: '',
    title: '',
    workType: '',
  };
  const loadData = async (current: any, size: any, data: any) => {
    try {
      setExpand(true);
      const result: any = await request.post(
        '/api/student/Operation/jobManagement',
        {
          current,
          size,
          ...data,
          type: '待批复',
        },
        {
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      if (result.success) {
        const data = result.data.info.map((approving: any) => ({
          key: `attendance_${approving.id}`,
          completeDate: approving.completeDate,
          courseName: approving.courseName,
          createTime: approving.createTime,
          id: approving.id,
          teacherName: approving.teacherName,
          title: approving.title,
          workStatus: approving.workStatus,
          workType: approving.workType,
          completeTime: approving.completeTime,
        }));
        setExpand(false);
        setDataSource(data);
      }
    } catch (e) {
      message.error('');
    }
  };

  React.useEffect(() => {
    loadData(0, 0, data);
  }, []);

  const onFinish = (values: any) => {
    const data = {
      completeDate: values.completeDate
        ? values.completeDate.format('yyyy-MM-DD HH:MM')
        : '',
      courseName: values.courseName,
      createTime1: values.date ? values.date[0].format('yyyy-MM-DD HH:MM') : '',
      createTime2: values.date ? values.date[1].format('yyyy-MM-DD HH:MM') : '',
      teacherName: values.teacherName,
      title: values.title,
      workType: values.workType,
    };
    console.log(data);
    loadData(0, 0, data);
  };

  return (
    <>
      <Form
        {...formItemLayout}
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
      >
        <Row gutter={24}>{getFields()}</Row>
        <Row>
          <Col span={24} style={{ textAlign: 'left' }}>
            <Button type="primary" style={{ width: '7%' }} htmlType="submit">
              查询
            </Button>
            <Button
              style={{ margin: '0 8px', width: '7%' }}
              onClick={() => {
                form.resetFields();
              }}
            >
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      <Table loading={expand} columns={columns} dataSource={dataSource} />
    </>
  );
};
